<template>
  <div class="appointment-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/pet-center'}">宠物中心</el-breadcrumb-item>
      <el-breadcrumb-item>预约中心</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 头部 -->
    <el-header class="appointment-header">
      <div class="title">
        <i class="el-icon-first-aid-kit"></i>
        预约中心
      </div>
    </el-header>

    <!-- 主体内容 -->
    <el-main class="appointment-main">
      <!-- 步骤条 -->
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step title="选择类型"></el-step>
        <el-step title="填写信息"></el-step>
        <el-step title="选择时间"></el-step>
        <el-step title="确认预约"></el-step>
      </el-steps>

      <!-- 预约表单 -->
      <el-card class="appointment-form">
        <!-- 第一步：选择预约类型 -->
        <div v-show="currentStep === 0">
          <h3>请选择预约类型</h3>
          <el-radio-group v-model="formData.type" @change="resetForm">
            <el-card
                v-for="type in appointmentTypes"
                :key="type.value"
                class="type-card"
                :class="{selected: formData.type === type.value}">
              <el-radio :label="type.value">
                <div class="type-content">
                  <i :class="type.icon"></i>
                  <h4>{{ type.label }}</h4>
                  <p>{{ type.description }}</p>
                </div>
              </el-radio>
            </el-card>
          </el-radio-group>
        </div>

        <!-- 第二步：填写详细信息 -->
        <div v-show="currentStep === 1">
          <h3>填写预约信息</h3>
          <el-form :model="formData" :rules="rules" ref="infoForm">
            <!-- 公共字段 -->
            <el-form-item label="宠物信息" prop="petId">
              <el-select v-model="formData.petId" placeholder="选择宠物">
                <el-option
                    v-for="pet in pets"
                    :key="pet.id"
                    :label="pet.name"
                    :value="pet.id">
                  <div class="pet-option">
                    <img :src="pet.avatar" class="pet-avatar">
                    <span>{{ pet.name }}（{{ pet.breed }}）</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>

            <!-- 疫苗预约专属字段 -->
            <template v-if="formData.type === 'vaccine'">
              <el-form-item label="疫苗类型" prop="vaccineType">
                <el-select v-model="formData.vaccineType">
                  <el-option
                      v-for="v in vaccines"
                      :key="v.id"
                      :label="v.name"
                      :value="v.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="接种历史">
                <el-checkbox-group v-model="formData.vaccineHistory">
                  <el-checkbox
                      v-for="h in vaccineHistoryOptions"
                      :key="h.value"
                      :label="h.value">
                    {{ h.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </template>

            <!-- 手术预约专属字段 -->
            <template v-if="formData.type === 'surgery'">
              <el-form-item label="症状描述" prop="symptoms">
                <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请详细描述宠物的症状和异常表现"
                    v-model="formData.symptoms">
                </el-input>
              </el-form-item>
              <el-form-item label="上传检查报告">
                <el-upload
                    action="https://your-upload-api.com"
                    multiple
                    :limit="3"
                    :file-list="fileList">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">支持jpg/png/pdf格式，不超过5MB</div>
                </el-upload>
              </el-form-item>
            </template>

            <el-form-item label="联系电话" prop="contact">
              <el-input v-model="formData.contact">
                <template slot="prepend">+86</template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>

        <!-- 第三步：选择时间地点 -->
        <div v-show="currentStep === 2">
          <h3>选择预约机构与时间</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="clinic-select">
                <el-radio-group v-model="formData.clinicId">
                  <el-card
                      v-for="clinic in clinics"
                      :key="clinic.id"
                      class="clinic-card"
                      :class="{selected: formData.clinicId === clinic.id}">
                    <el-radio :label="clinic.id">
                      <div class="clinic-info">
                        <h4>{{ clinic.name }}</h4>
                        <p><i class="el-icon-location"></i>{{ clinic.address }}</p>
                        <p><i class="el-icon-phone"></i>{{ clinic.phone }}</p>
                        <el-rate :value="clinic.rating" disabled></el-rate>
                      </div>
                    </el-radio>
                  </el-card>
                </el-radio-group>
              </div>
            </el-col>

            <el-col :span="12">
              <div class="time-select">
                <el-date-picker
                    v-model="formData.date"
                    type="date"
                    placeholder="选择日期"
                    :disabled-date="disabledDate"
                    value-format="yyyy-MM-dd">
                </el-date-picker>

                <div class="time-slots">
                  <el-radio-group v-model="formData.timeSlot">
                    <el-radio-button
                        v-for="slot in timeSlots"
                        :key="slot.time"
                        :label="slot.time"
                        :disabled="slot.remaining === 0">
                      {{ slot.time }}
                      <span class="remaining">剩余{{ slot.remaining }}位</span>
                    </el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 第四步：确认信息 -->
        <div v-show="currentStep === 3">
          <h3>请确认预约信息</h3>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="预约类型">
              {{ formData.type | formatType }}
            </el-descriptions-item>
            <el-descriptions-item label="预约宠物">
              <img :src="selectedPet.avatar" class="confirm-avatar">
              {{ selectedPet.name }}（{{ selectedPet.breed }}）
            </el-descriptions-item>
            <template v-if="formData.type === 'vaccine'">
              <el-descriptions-item label="疫苗类型">
                {{ selectedVaccine.name }}
              </el-descriptions-item>
              <el-descriptions-item label="接种历史">
                {{ formData.vaccineHistory.join(', ') }}
              </el-descriptions-item>
            </template>
            <template v-if="formData.type === 'surgery'">
              <el-descriptions-item label="症状描述">
                {{ formData.symptoms }}
              </el-descriptions-item>
            </template>
            <el-descriptions-item label="预约机构">
              {{ selectedClinic.name }}（{{ selectedClinic.address }}）
            </el-descriptions-item>
            <el-descriptions-item label="预约时间">
              {{ formData.date }} {{ formData.timeSlot }}
            </el-descriptions-item>
            <el-descriptions-item label="联系电话">
              {{ formData.contact }}
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button
              v-if="currentStep > 0"
              @click="prevStep"
              :disabled="currentStep === 0">
            上一步
          </el-button>

          <el-button
              type="primary"
              @click="nextStep">
            {{ currentStep === 3 ? '提交预约' : '下一步' }}
          </el-button>
        </div>
      </el-card>

      <!-- 预约成功对话框 -->
      <el-dialog
          title="预约成功"
          :visible.sync="successDialog"
          width="30%">
        <div class="success-content">
          <i class="el-icon-success success-icon"></i>
          <h3>预约提交成功！</h3>
          <p>预约编号：{{ appointmentNumber }}</p>
          <el-divider></el-divider>
          <div class="important-notice">
            <p>注意事项：</p>
            <ul>
              <li>请提前15分钟到达医院</li>
              <li>携带宠物免疫证明和相关病历</li>
              <li>手术预约需提前6小时禁食</li>
              <li>如需修改请至少提前24小时联系</li>
            </ul>
          </div>
        </div>
      </el-dialog>
    </el-main>
  </div>
</template>

<script>
export default {
  name: 'MedicalAppointment',
  filters: {
    formatType(type) {
      const map = {
        vaccine: '疫苗预约',
        surgery: '手术预约',
        exam: '健康检查'
      }
      return map[type] || '其他预约'
    }
  },
  data() {
    // 手机号验证规则
    const validatePhone = (rule, value, callback) => {
      if (!/^1[3-9]\d{9}$/.test(value)) {
        callback(new Error('请输入有效的手机号码'))
      } else {
        callback()
      }
    }

    return {
      currentStep: 0,
      formData: {
        type: 'vaccine',
        petId: '',
        vaccineType: '',
        vaccineHistory: [],
        symptoms: '',
        clinicId: '',
        date: '',
        timeSlot: '',
        contact: ''
      },
      appointmentTypes: [
        {
          value: 'vaccine',
          label: '疫苗预约',
          icon: 'el-icon-coin',
          description: '各类宠物疫苗接种预约'
        },
        {
          value: 'surgery',
          label: '手术预约',
          icon: 'el-icon-scissors',
          description: '绝育/治疗等手术预约'
        },
        {
          value: 'exam',
          label: '健康检查',
          icon: 'el-icon-document-checked',
          description: '常规体检/专科检查预约'
        }
      ],
      pets: [
        {
          id: 1,
          name: '豆豆',
          breed: '金毛寻回犬',
          avatar: require('@/assets/images/img.png')
        }
      ],
      vaccines: [
        {id: 1, name: '狂犬疫苗'},
        {id: 2, name: '犬六联疫苗'}
      ],
      vaccineHistoryOptions: [
        {value: 'first', label: '首次接种'},
        {value: 'same', label: '同品牌接种史'},
        {value: 'other', label: '其他品牌接种史'}
      ],
      clinics: [
        {
          id: 1,
          name: '爱心宠物医院',
          address: '北京市朝阳区XX路123号',
          phone: '010-12345678',
          rating: 4.8
        }
      ],
      timeSlots: [
        {time: '09:00-10:00', remaining: 2},
        {time: '10:00-11:00', remaining: 0},
        {time: '14:00-15:00', remaining: 3}
      ],
      rules: {
        petId: [{required: true, message: '请选择宠物', trigger: 'change'}],
        vaccineType: [{required: true, message: '请选择疫苗类型', trigger: 'change'}],
        symptoms: [{required: true, message: '请输入症状描述', trigger: 'blur'}],
        contact: [
          {required: true, message: '请输入联系电话', trigger: 'blur'},
          {validator: validatePhone, trigger: 'blur'}
        ]
      },
      successDialog: false,
      appointmentNumber: `APP${Date.now().toString().slice(-6)}`
    }
  },
  computed: {
    selectedPet() {
      return this.pets.find(p => p.id === this.formData.petId) || {}
    },
    selectedVaccine() {
      return this.vaccines.find(v => v.id === this.formData.vaccineType) || {}
    },
    selectedClinic() {
      return this.clinics.find(c => c.id === this.formData.clinicId) || {}
    }
  },
  methods: {
    disabledDate(time) {
      return time < Date.now() - 8.64e7
    },
    resetForm() {
      this.currentStep = 0
      this.formData = {
        ...this.formData,
        vaccineType: '',
        vaccineHistory: [],
        symptoms: '',
        clinicId: '',
        date: '',
        timeSlot: ''
      }
    },
    nextStep() {
      if (this.currentStep === 1) {
        this.$refs.infoForm.validate(valid => {
          if (valid) this.currentStep++
        })
      } else if (this.currentStep === 3) {
        this.submitAppointment()
      } else {
        this.currentStep++
      }
    },
    prevStep() {
      if (this.currentStep > 0) this.currentStep--
    },
    submitAppointment() {
      this.successDialog = true
      // 实际提交逻辑
      console.log('预约数据:', this.formData)
    }
  }
}
</script>

<style scoped>
.appointment-header {
  background: linear-gradient(135deg, #409EFF 0%, #67C23A 100%);
  color: white;
  display: flex;
  align-items: center;
}

.title {
  font-size: 24px;
  margin-left: 20px;
}

.type-card {
  margin: 10px;
  width: 300px;
  cursor: pointer;
  transition: all 0.3s;
}

.type-card.selected {
  border-color: #409EFF;
  background: #f0faff;
}

.type-content {
  text-align: center;
  padding: 20px;
}

.type-content i {
  font-size: 40px;
  color: #409EFF;
  margin-bottom: 15px;
}

.pet-option {
  display: flex;
  align-items: center;
}

.pet-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.clinic-card {
  margin: 10px 0;
  cursor: pointer;
}

.clinic-card.selected {
  border-color: #67C23A;
}

.clinic-info {
  padding: 15px;
}

.time-slots {
  margin-top: 20px;
}

.el-radio-button {
  margin: 5px;
}

.remaining {
  font-size: 12px;
  color: #909399;
}

.confirm-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
}

.success-content {
  text-align: center;
}

.success-icon {
  font-size: 60px;
  color: #67C23A;
  margin-bottom: 15px;
}

.important-notice {
  text-align: left;
  margin-top: 15px;
}

@media (max-width: 768px) {
  .el-col {
    width: 100%;
  }

  .type-card {
    width: 100%;
  }

  .time-slots .el-radio-button {
    width: 100%;
    display: block;
    margin: 5px 0;
  }
}
</style>